/*
  学习目标：hooks补充- useHistory
  作用: 可以在任意的函数式组件中, 获取history对象
  本质: 是统一个history
  区别: 
    1. ✅useHistory 可以在任意的函数式组件中使用
    2. props.history只能在Route组件设置过匹配规则, 才能使用
   
*/

import React from 'react';

import {
  HashRouter as Router,
  Route,
  Switch,
  useHistory,
} from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/main" component={Main} />
      </Switch>
      <Footer />
    </Router>
  );
}

function Home() {
  const history = useHistory();
  return (
    <h1
      onClick={() => {
        history.push('/main');
      }}
    >
      home
    </h1>
  );
}

function Main() {
  return <h2>Main</h2>;
}

function Footer() {
  const history = useHistory();

  console.log('history  ----->  ', history);
  return <h3 onClick={() => history.push('/home')}>Footer</h3>;
}
